<template>
  <div v-if="log.length" class="log-container">
    <div class="log-list">
      <template v-for="item in log">
        <change-title-item v-if="item.action === 'change_title'" :key="item.id" :item="item" />
        <change-content-item v-if="item.action === 'change_content'" :key="item.id" :item="item" />
        <change-tags-item v-if="item.action === 'change_tags'" :key="item.id" :item="item" />
        <change-essence-item v-if="item.action === 'change_essence'" :key="item.id" :item="item" />
        <accept-answer-item v-if="item.action === 'accept_answer'" :key="item.id" :item="item" />
      </template>
    </div>
    <div style="padding-left: 5.065rem;">
      <span v-if="!logOpened && pagination.count > 1" class="info-deep f-mini">
        <span class="link el-link--primary" @click="seeLog">查看更多日志</span>
      </span>
      <pagination
        v-else
        :current-page="pagination.current"
        :page-count="pagination.count"
        is-mini
        no-router
        :page.sync="loadPage"
      />
    </div>
  </div>
</template>

<script>
import { formatLog } from '@/components/change-log/format';
import ChangeTitleItem from './log-items/change-title-item';
import ChangeContentItem from './log-items/change-content-item';
import ChangeTagsItem from './log-items/change-tags-item';
import ChangeEssenceItem from './log-items/change-essence-item';
import AcceptAnswerItem from './log-items/accept-answer-item';

export default {
  name: 'issue-log',
  components: {
    ChangeTitleItem,
    ChangeContentItem,
    ChangeTagsItem,
    ChangeEssenceItem,
    AcceptAnswerItem,
  },
  data() {
    return {
      log: [],
      loading: false,
      pagination: {
        current: null,
        count: null,
      },
      loadPage: 1,
      logOpened: false,
    };
  },
  computed: {
    // 加载日志所需参数
    loadLogParams() {
      return {
        spaceId: this.$route.params.spaceId,
        issueId: this.$route.params.issueId,
        page: this.loadPage,
      };
    },
  },
  created() {
    this.loadLog({ page: 1, number: 3 });
  },
  mounted() {},
  methods: {
    // 加载日志
    loadLog(obj = {}) {
      this.loading = true;
      const params = Object.assign({}, this.loadLogParams, obj);
      this.$api.spaceIssues.log(params)
        .then((res) => {
          if (obj.lastPage && res.kaminari.total_pages > params.page) {
            this.loadLog({ page: res.kaminari.total_pages });
          } else {
            this.log = formatLog(res.data);
            if (params.number !== 3) {
              this.pagination.current = res.kaminari.current_page;
            }
            this.pagination.count = res.kaminari.total_pages;
            this.loading = false;
          }
        })
        .catch(() => { this.loading = false; });
    },
    seeLog() {
      this.logOpened = true;
      this.loadLog();
    },
    // 别处触发的刷新，未展开时不刷新
    refreshLog() {
      if (this.logOpened) {
        this.loadLog({ lastPage: true });
      } else {
        this.loadLog({ page: 1, number: 3 });
      }
    },
  },
  watch: {
    loadLogParams() {
      this.loadLog();
    },
  },
};
</script>

<style lang="scss">
.log-container {
  padding-top: .5rem;
}
.log-list {
  position: relative;
  padding-left: 5.065rem;

  &::before {
    content: '';
    border-left: 2px solid #f0f0f0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 94px;
    height: calc(100% - 20px);
  }
}
</style>
